<template>
	<view class="container">
		<tui-navigation-bar :isOpacity="false" :maxOpacity="1" @init="initNavigation" :scrollTop="scrollTop"
			backgroundColor="#fff" color="#333" :title="pageTitle">
			<view class="tui-header" :style="{ marginTop: navBarTop + 'px' }">
				<view class="get-back dy-iconfont icon-qiehuanqizuo" @click="goBack"></view>
			</view>
		</tui-navigation-bar>
		<view class="main">
			<calendar ref="calendar" :userId="userId" @clickDate="clickDate"></calendar>
			<button v-if="!compile && value != 'look'" class="btn-primary btn-submit" @tap.stop.prevent="onCompile">编辑</button>
			<button v-if="compile" class="btn-primary btn-submit" @tap.stop.prevent="onSubmit">确认修改</button>
		</view>
		<survey-pop></survey-pop>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	import {
		timeFormat
	} from '@/uni_modules/uv-ui-tools/libs/function/index.js';
	import mp from "@/mixins/mp.js";
	const app = getApp();
	export default {
		mixins: [mp],
		options: {
			styleIsolation: 'shared'
		}, //解决/deep/不生效**
		components: {},
		data() {
			return {
				navBarOpacity: 0, //标题图标距离顶部距离
				scrollTop: 0.5, //页面滚动高度
				navBarTop: 0, // 导航栏content顶部m-top
				pageTitle: '档期管理', //标题
				compile: false,
				delList: [],
				saveList: [],
				value: '',
				userId: null
			};
		},
		/**
		 * 计算属性
		 */
		computed: {},
		onLoad(options) {
			if (options) {
				this.value = options.id || ''
				this.userId = options.userId || null
				this.pageTitle = options.title || '档期管理'
			}
		},
		onShow: function() {},
		/**
		 * 下拉
		 */
		onPullDownRefresh: function() {},
		/**
		 * 触底
		 */
		onReachBottom() {},
		/**
		 * 滚动
		 */
		onPageScroll(res) {
			this.scrollTop = res.scrollTop;
		},
		methods: {
			goLogin() {
				app.doLogin()
			},
			initNavigation(e) {
				this.navBarOpacity = e.opacity;
				this.navBarTop = e.top;
			},
			onCompile() {
				this.compile = true
			},
			clickDate(e) {
				if (!this.compile) {
					return
				}
				let day = timeFormat(e.date.date, 'dd')
				let index = e.index
				let newDaysArr = e.dateList
				let date = e.date
				if (!newDaysArr[index].status) {
					this.$refs.calendar.newDaysArr[index].status = true
					this.saveList.push(e.date.date)
				} else {
					this.$refs.calendar.newDaysArr[index].status = false
					this.delList.push(e.date.date)
				}
				this.delList.forEach((v, index_v) => {
					this.saveList.forEach((i, index_i) => {
						if (v == i) {
							this.saveList.splice(index_i, 1);
							this.delList.splice(index_v, 1);
						}
					});
				});
			},
			onSubmit() {
				return new Promise((resolve, reject) => {
					app._post_form(
						"/client/peng-timetable/update-timetable", {
							delList: this.delList,
							saveList: this.saveList,
						},
						(result) => {
							this.compile = false
							this.$refs.toast.show({
								type: 'default',
								message: "档期修改成功"
							})
							setTimeout(() => {
								this.$refs.toast.hide()
							}, 1000)
						}, null, () => {
							resolve();
						}
					);
				});
			},

			// 返回上一页
			goBack: function() {
				app.beNavigateBack();
			},
		},
	};
</script>
<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: #F6F8F7;

		.tui-header {
			width: 100%;
			position: fixed;
			top: 0;
			padding: 0 42rpx;
			display: flex;
			align-items: center;
			height: 32px;
			transform: translateZ(0);
			z-index: 99999;
			box-sizing: border-box;

			.get-back {
				flex-shrink: 0;
				width: 36rpx;
				height: 36rpx;
				color: #000;
				font-size: 36rpx;
				padding: 2rpx 40rpx 2rpx 2rpx;
			}
		}

		.main {
			box-sizing: border-box;
			padding: 212rpx 36rpx 66rpx;

			.compile {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 24rpx;

				.btn-compile {
					width: 140rpx;
					height: 58rpx;
					border-radius: 20rpx;
					line-height: 58rpx;
				}

				.title {
					font-size: 28rpx;
					font-weight: 400;
					color: #000000;
					line-height: 58rpx;
					display: flex;
					align-items: center;

					&::before {
						content: "";
						display: block;
						width: 10rpx;
						height: 10rpx;
						background: #FF0000;
						border-radius: 50%;
						margin-right: 12rpx;
					}
				}
			}

			.btn-submit {
				width: calc(100% - 41rpx * 2);
				// height: 102rpx;
				// line-height: 102rpx;
				border-radius: 20rpx;
				margin: 0 auto;
				margin-top: 60rpx;
			}
		}


	}
</style>